<template>
  <div class="content-wrapper">
    <div class="content-header">仪器设备</div>
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="仪器编号">
          <el-input size="medium" v-model.trim="listQuery.equipmentCode" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="仪器名称">
          <el-input size="medium" v-model.trim="listQuery.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select size="medium" v-model="listQuery.status" placeholder="状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="openDialog('create')"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        highlight-current-row
        >
        <el-table-column label="仪器设备名称" prop="name" min-width="100px" />
        <el-table-column label="编号" prop="equipmentCode" width="160px" />
        <el-table-column label="规格" prop="specification" width="160px" align="center" />
        <el-table-column label="有效期" prop="expiration" width="160px" />
        <el-table-column label="状态" prop="status" width="100px" :formatter="(row, column, cellValue, index) => {
          return cellValue == 1?'启用':'停用'
        }"/>
        <el-table-column label="操作" align="center" width="150px" >
          <template slot-scope="{row,$index}">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="updateStatus(row)">{{ !row.status == 1?'启用':'停用' }}</el-dropdown-item>
                <el-dropdown-item @click.native="openDialog('update',row)">修改</el-dropdown-item>
                <el-dropdown-item @click.native="deleteEquipment(row)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page-number.sync="listQuery.pageNumber" :page-size.sync="listQuery.pageSize" @pagination="getDataList" />
    </div>
    <el-dialog
      :title="titleMap[titleStatus]"
      :visible.sync="dialogVisible"
      @close="closeDialog"
      width="30%">
      <el-form ref="form" :rules="rules" :model="saveData" label-width="80px">
        <el-form-item label="编号" prop="equipmentCode">
          <el-input :disabled="titleStatus == 'update'" v-model="saveData.equipmentCode" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="saveData.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="specification">
          <el-input v-model="saveData.specification" placeholder="规格"></el-input>
        </el-form-item>
        <el-form-item label="有效期" prop="expiration">
          <el-date-picker
            v-model="saveData.expiration"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="有效期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="titleStatus == 'create'?create():update()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { page, save, update, updateStatus, deleted } from '@/api/equipment/equipment'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      statusOptions: [{label: "启用", value: 1}, {label: "禁用", value: 0}],
      listLoading: false,
      dataList: [],
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 5
      },
      titleMap: {
        create: "新增",
        update: "修改"
      },
      rules: {
        equipmentCode: [{ required: true, message: '输入内容不可为空', trigger: 'blur' }],
        name: [{ required: true, message: '输入内容不可为空', trigger: 'blur' }],
        specification: [{ required: true, message: '输入内容不可为空', trigger: 'blur' }],
        expiration: [{ required: true, message: '输入内容不可为空', trigger: 'blur' }]
      },
      titleStatus: "create",
      dialogVisible: false,
      saveData: {//保存的数据
        equipmentCode: ""
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  methods:{
    deleteEquipment(row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(row).then(res => {
          this.$message.success("删除成功")
          this.getDataList()
        })
      }).catch(() => {
        this.$message.info("已取消删除")
      });
    },
    updateStatus(row){
      if (row.status == 1) {
        row.status = 0
      }else{
        row.status = 1
      }
      updateStatus(row).then(res => {
        this.getDataList()
        this.$message.success(row.status = 1?'启用成功':'禁用成功')
      })
    },
    update(){
      this.$refs.form.validate(vaild => {
        if (vaild) {
          update(this.saveData).then(res => {
            this.$message.success("修改成功")
            this.getDataList()
          })
        }
      })
    },
    create(){
      this.$refs.form.validate(vaild => {
        if (vaild) {
          save(this.saveData).then(res => {
            this.$message.success("新增成功")
            this.dialogVisible = false
            this.getDataList()
          })
        }
      })
    },
    closeDialog(){
      this.$refs.form.resetFields()
    },
    openDialog(val, row){
      this.titleStatus = val
      if (row) {
        this.saveData = row
      }
      this.dialogVisible = true
    },
    getDataList(){
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      page(this.listQuery).then(res => {
        this.dataList = res.data.rows
        this.total = res.data.total
      })
    }
  }
}
</script>
